<template>
  <div>
    <div class="top">
      <van-nav-bar fixed title="银行卡" left-arrow @click-left="onClickLeft">
      </van-nav-bar>
    </div>
    <template v-if="card.length > 0">
      <div class="card" v-for="item in card" :key="item.id">
        <div>
          <span>中国银行</span>
          <span class="del" @click="showKeyboard(item.bank_card)">删除</span>
        </div>
        <div style="font-size: 8vw">
          **** **** **** {{ item.bank_card.toString().slice(12, 16) }}
        </div>
      </div>
    </template>
    <div v-else>
      <van-empty description="当前未绑定银行卡" />
    </div>

    <van-button
      icon="plus"
      plain
      hairline
      type="primary"
      class="addBtn"
      @click="addBankCard"
    >
      添加银行卡</van-button
    >

    <van-popup
      v-model="show"
      position="bottom"
      closeable
      :round="true"
      :style="{ height: '60vh', background: '#ebebeb' }"
      @close="checkPwd()"
    >
      <div style="margin: 5vw; text-align: center">请先进行支付密码核实</div>

      <!-- 密码输入框 -->
      <van-password-input :value="value" :focused="true" />
      <!-- 数字键盘 -->
      <van-number-keyboard
        v-model="value"
        maxlength="6"
        theme="custom"
        close-button-text="完成"
        extra-key="00"
        :show="true"
        @blur="value = ''"
        @close="checkPwd"
      />
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapState } from "vuex";
export default {
  data() {
    return {
      userInfo: {},
      value: "",
      show: false,
      bankCardId: "",
    };
  },
  computed: {
    ...mapState({
      card: (state) => state.card.bankCard,
    }),
    uid() {
      console.log(this.card);
      return sessionStorage.getItem("uid") || "";
    },
    lastStr() {
      let data = [];
      this.card.forEach((item) => {
        data.push(item.substring(14, 16));
      });
      return data;
    },
  },
  methods: {
    // 返回
    onClickLeft() {
      history.go(-1);
    },
    getData() {
      this.$store.dispatch("getBankCardInfo", this.uid);
    },
    // 跳转至添加银行卡页面
    addBankCard() {
      this.$router.push("/addbankcard");
    },
    // 展示密码键盘
    showKeyboard(bankCardId) {
      this.show = true;
      this.bankCardId = bankCardId;
    },
    // 核对支付密码后删除银行卡
    checkPwd() {
      // 获取支付密码
      this.$store.dispatch("getPayPassword", {
        uid: sessionStorage.getItem("uid"),
        bankCard: this.bankCardId,
      });
      let payPassword = this.$store.state.card.payPassword;
      console.log(payPassword, this.value);
      if (payPassword == this.value) {
        let res = this.$store.dispatch("delBankCard", {
          uid: sessionStorage.getItem("uid"),
          bankCard: this.bankCardId,
          payPassword: this.value,
        });
        res
          .then(() => {
            Toast("银行卡删除成功");
            this.getData();
          })
          .catch(() => {
            Toast("银行卡删除失败");
          });
        this.show = false;
      } else {
        Toast("密码错误，请重新输入");
        return;
      }
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang='scss' scoped>
.top {
  height: 13vw;
  .van-nav-bar {
    background-color: transparent;
    background-color: #f5b400;
    color: #fff;

    ::v-deep .van-nav-bar__text,
    ::v-deep .van-nav-bar__title,
    ::v-deep .van-icon {
      color: #fff;
    }
  }
  ::v-deep .van-hairline--bottom::after {
    border-bottom-width: 0px;
  }
}
.card {
  margin: 5vw;
  padding: 5vw;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  width: 90vw;
  height: 40vw;
  background: linear-gradient(to bottom right, #f5b400, #52e4a5);
  border-radius: 10px;
  div {
    color: #fff;
    font-size: 5vw;
    padding: 0;
    margin: 0;
    position: relative;
    .del {
      color: rgba(255, 255, 255, 0.7);
      width: 10vw;
      font-size: 3vw;
      position: absolute;
      left: 74vw;
      top: -2vw;
    }
  }
}
.addBtn {
  color: #f5b400;
  margin: 5vw;
  width: 90vw;
  height: 12vw;
  font-weight: 600;
}
::v-deep .van-button--primary {
  border-radius: 2vw;
  border: 0.7vw #f5b400 solid;
}
</style>

